<template>
  <div class="setpwd">

    <v-step :list="barList" :titleType=4 :step=3></v-step>

    <div class="line-box"></div>
    <div class="wrap-box">
      <div class="title1">提现密码:</div>
      <div class="title2"><input type="password" maxlength="16" v-model="withPwd" placeholder="请设置提现密码"
                                 class="input-box" @blur="inputBlur"/></div>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn" @click="bind">绑定</button>
    </div>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="chance"></v-dialog>
    <v-dialog v-model="sendVal" :content="content" type="default" @sure="sure"></v-dialog>
  </div>
</template>

<script>
  import step from "../../components/flow/flow"
  import md5 from 'js-md5'
  import dialog from "../../components/dialog/dialog"
  import {baseUrl, salt} from "../../common/js/env"

  export default {
    data() {
      return {
        withPwd: "",
        userName: "",
        certNo: "",
        cardNo: "",
        bankArea: "",
        withPwd: "",
        modalVal: false,
        modal: "",
        sendVal: false,
        content: "",
        barList: ['身份证信息', '银行卡扫描', '银行卡信息', '设置提现密码'],
        bankName: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };

    },
    methods: {
      checkWithdrawPwd() {//校验提现密码
        let reg = /^[0-9]*$/;
        if (this.withPwd == '' || this.withPwd == null) {
          this.$vux.toast.text("请输入6位提现密码", "middle");
          return;
        } else if (this.withPwd.length < 6 || !reg.test(this.withPwd)) {
          this.$vux.toast.text("请输入6位数字密码", "middle");
          return;
        }
        return true;
      },
      bind() {
        this.userName = sessionStorage.getItem("bank_user_name"); //姓名
        this.certNo = sessionStorage.getItem("identity_no"); //身份证号
        this.cardNo = sessionStorage.getItem("card_no"); //银行卡号
        this.bankArea = sessionStorage.getItem("bank_addr"); //银行卡归属地
        this.bankName = sessionStorage.getItem("bank_name"); //银行名称
        if (this.checkWithdrawPwd()) {
          this.certNo = this.$encruption(this.$decruption(this.certNo));
          this.cardNo = this.$encruption(this.$decruption(this.cardNo));
          this.$vux.loading.show({
            text: '加载中',
          });

          //绑定银行卡
          let data = {
            "userName": this.userName,
            "identityNo": this.certNo,
            "bankNumber": this.cardNo,
            "openBankAddr": this.bankArea,
            "moneyPassword": md5(md5(this.withPwd) + salt),
            "type": 2,
            "bankName": this.bankName
          };
          this.axios.post(baseUrl + "/userbank/bindunbind_bankcard?sgin=" + this.userSign, data).then((res) => {
            let bindObj = res.data;
            this.$vux.loading.hide();
            if (bindObj.code == 0 && bindObj.data != null) {
              if (bindObj.data.res_code == 0) {
                this.$router.push("/success");
              } else if (bindObj.data.res_code == 20029) {
                this.modal = "很遗憾,今日绑定机会已使用完,请明日再进行绑定";
                this.modalVal = true;
              } else {
                this.content = "您今日还剩" + bindObj.data.res_error_num + "次机会,请仔细核对您的信息(" + bindObj.data.res_msg + ")";
                this.sendVal = true;
              }
            } else {
              this.$vux.toast.text(bindObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      chance() {
        this.modalVal = false;
      },
      sure() {
        this.sendVal = false;
      },
      inputBlur() {
        window.scrollTo(0, 0)
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      "v-step": step,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  .setpwd
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      display: flex
      align-items: center
      margin-left: 3.6%
      width: 96.4%
      height: 1.333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title1
        height: 0.56rem
        line-height: 0.56rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
      .title2
        padding-left: 0.107rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
        .input-box
          vertical-align: middle
          line-height: 0.56rem
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      height: 1.333rem
      text-align: center
      .btn
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
</style>
